import './index.css'
import avatar from './images/avatar.png'
import React from 'react'
import { v4 as uuid } from 'uuid';
// 时间格式化
function formatDate (time) {
  return `${time.getFullYear() + 1}-${time.getMonth()+1}-${time.getDate()}`
}

class App extends React.Component {
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot'
      },
      {
        id: 2,
        name: '时间',
        type: 'time'
      }
    ],
    active: 'hot',
    list: [
      {
        id: 1,
        author: '准时不早退的里里',
        comment: '给我一杯忘情水',
        time: new Date('2021-3-20 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1
      },
      {
        id: 2,
        author: '俊俏的羊角洮洮',
        comment: '我发现了大宝藏！！！[点赞][点赞]',
        time: new Date('2021-3-24 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0
      },
      {
        id: 3,
        author: '居右吃不吃',
        comment: '太棒了[支持]',
        time: new Date('2021-3-25 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      },{
        id: 4,
        author: '🐂收藏夹吃灰',
        comment: '视频质量真的高啊，很合时',
        time: new Date('2021-3-23 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      },{
        id: 5,
        author: '皈依ぃ',
        comment: '📁收藏夹吃灰',
        time: new Date('2021-3-26 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      },{
        id: 6,
        author: '柴柴 🐶',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-3-22 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      }
    ],
    comment: '请输入内容' //评论框中
  }
  //切换tabbar
  switchTab = (type) =>{
    this.setState({
      active: type
    })
  }
  // 评论列表
  textareaChange = (e) =>{
    this.setState({
      comment: e.target.value
    })
  }
  //发表评论
  submitComment = () =>{
    this.setState({
      //往list列表后提交一项
      list: [
        ...this.state.list,
        {
          id: uuid(), //独一无二的值
          author: 'cp',
          comment: this.state.comment,
          time: new Date(),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0
        }
      ],
      comment: ''
    })
  }
  //删除评论
  delComment = (id) =>{
    // console.log('id',id);
    this.setState({
      list: this.state.list.filter(item=> item.id !== id)
    })
  }
  //激活喜欢功能
  toggleLike = (curItem) =>{
    console.log(curItem);
    // 逻辑：如果attitude为1则改为0，否则是 1
    // attitude id (作为修改谁的判断条件)
    const { attitude, id } = curItem
    this.setState({
      list: this.state.list.map((item) =>{
        // 判断条件 如果item.id === id,修改当前item的attitude属性
        // 不匹配则原样返回
        if(item.id === id) {
          return {
            ...item, //先返回原数组
            //当属性发生重复 会以后面的为主进行覆盖
            attitude: attitude === 1 ? 0 : 1
          }
        } else {
          return item
        } 
      })
    })
  }
  render () {
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>999+ 评论</span>
          </div>
          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {
                this.state.tabs.map(tab => (
                  <li
                    onClick={() =>this.switchTab(tab.type) }
                    key={tab.id}
                    className={tab.type === this.state.active ? 'on' : ''}
                  >按{tab.name}排序</li>
                ))
              }
            </ul>
          </div>

          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="textarea-container">
              {/* 输入框 */}
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                // 绑定value值(state)
                value={this.state.comment}
                onChange={this.textareaChange}
              />
              <button className="comment-submit" onClick={this.submitComment}>发表评论</button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>

          {/* 评论列表 */}
          <div className="comment-list">
            {
              this.state.list.map(item => (
                <div className="list-item" key={item.id}>
                  <div className="user-face">
                    <img className="user-head" src={avatar} alt="" />
                  </div>
                  <div className="comment">
                    <div className="user">{item.author}</div>
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">{formatDate(item.time)}</span>
                      {/* 切换喜欢 */}
                      <span
                        onClick={() => this.toggleLike(item)}
                        className={item.attitude === 1 ? 'like liked' : 'like'}
                      >
                        <i className="icon" />
                      </span>
                      <span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
                        <i className="icon" />
                      </span>
                      {/* 删除功能 */}
                      <span className="reply btn-hover" onClick={() =>this.delComment(item.id)}>删除</span>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>)
  }
}


export default App
